<template>
	<view>
		<view class="bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">排行榜</block>
			</cu-custom>
		</view>
		<scroll-view scroll-y="true" :style="{height: viewHeight +'rpx'}">
			<view class="bg-white">
				<view class="bg-orange" style="position: relative; width: 750rpx; height: 650rpx;">
					<view class="flex justify-center text-sl text-bold"
						style="position: absolute; left: 0; top: 100rpx; width: 750rpx;height: 100rpx;">
						自习时长排行榜
					</view>
					<view class="flex justify-around"
						style="position: absolute; left: 0; bottom: 110rpx; width: 750rpx; height: 260rpx;">
						<!-- 第二名 -->
						<view style="width: 210rpx; height: 280rpx;">
							<view style="position: relative;">
								<image style="position: absolute; right: 15rpx; width: 100rpx; height: 100rpx;"
									src="/other_pages/static/rank/two.png"></image>
								<image style="width: 120rpx; height: 120rpx; border-radius: 100%;"
									class="margin-top-xl margin-left-lg solid" :src="rankList[1].user.avatarUrl">
								</image>
								<view class="text-lg text-center"
									style="width: 100%; height: 60rpx; line-height: 60rpx;">
									{{rankList[1].user.nickname}}
								</view>
								<view class="text-df text-center"
									style="width: 100%; height: 40rpx; line-height: 40rpx;">
									{{rankList[1].hours}}<span>小时</span>
								</view>
							</view>
						</view>

						<!-- 第一名 -->
						<view style="width: 210rpx; height: 280rpx;">
							<view style="position: relative;">
								<image
									style="position: absolute; right: -15rpx; top: -50rpx; width: 60px; height: 60px;"
									src="/other_pages/static/rank/one.png"></image>
								<image style="width: 150rpx; height: 150rpx; border-radius: 100%;"
									class="margin-top-sm margin-left solid" :src="rankList[0].user.avatarUrl"></image>
								<view class="text-lg text-center"
									style="width: 100%; height: 60rpx; line-height: 60rpx;">
									{{rankList[0].user.nickname}}
								</view>
								<view class="text-df text-center"
									style="width: 100%; height: 40rpx; line-height: 40rpx;">
									{{rankList[0].hours}}<span>小时</span>
								</view>
							</view>
						</view>

						<!-- 第三名 -->
						<view style="width: 210rpx; height: 280rpx;">
							<view style="position: relative;">
								<image style="position: absolute; right: 15rpx; width: 100rpx; height: 100rpx;"
									src="/other_pages/static/rank/three.png"></image>
								<image style="width: 120rpx; height: 120rpx; border-radius: 100%;"
									class="margin-top-xl margin-left-lg solid" :src="rankList[2].user.avatarUrl">
								</image>
								<view class="text-lg text-center"
									style="width: 100%; height: 60rpx; line-height: 60rpx;">
									{{rankList[2].user.nickname}}
								</view>
								<view class="text-df text-center"
									style="width: 100%; height: 40rpx; line-height: 40rpx;">
									{{rankList[2].hours}}<span>小时</span>
								</view>
							</view>
						</view>
					</view>
					<view class="padding bg-white"
						style="position: absolute; left: 25rpx; bottom: -115rpx; width: 700rpx;height: 210rpx; border-radius: 20rpx; box-shadow: 3px 3px 15px 3px rgba(0, 0, 0, 0.1);">
						<view class="flex justify-between text-df">
							<text>近一个月统计</text>
							<text class="text-sm text-gray">
								截止：{{nowTime}}
							</text>
						</view>
						<view class="flex justify-around padding-top">
							<view style="width: 50%;" class="solid-right;text-center">
								<view class="text-xxl text-green">4小时</view>
								<view class="text-df text-grey">平均每天</view>
							</view>
							<view style="width: 50%;" class="text-center">
								<view class="text-xxl text-green">35小时</view>
								<view class="text-df text-grey">平均每周</view>
							</view>
						</view>
					</view>
				</view>

				<view class="margin-lr-sm" style="width: 750rpx; min-height: 200rpx; margin-top: 130rpx;">
					<view class="flex flex-start align-center solid-bottom" style="width: 700rpx; height: 140rpx;"
						v-for="(item,index) in rankList.slice(3)" :key="index">
						<view style="float: left; width: 60rpx; height: 140rpx; line-height: 140rpx;"
							class="text-center text-lg">
							<text>{{ index + 4 }}</text>
						</view>
						<view style="float: left; width: 100rpx; height: 100rpx; line-height: 100rpx;"
							class="margin-left-sm">
							<image style="width: 100%; height: 100%; border-radius: 100%;" :src="item.user.avatarUrl">
							</image>
						</view>
						<view style="float: left; width: 380rpx; height: 140rpx; line-height: 140rpx;"
							class="text-lg margin-left-lg">
							<view class="text-bold">{{item.user.nickname}}</view>
						</view>
						<view style="float: right; width: 100rpx; height: 140rpx; line-height: 140rpx;" class="text-lg">
							<text class="text-blue">{{item.hours}}</text>小时
						</view>
					</view>
				</view>
				<view style="height: 140rpx;">

				</view>
			</view>
		</scroll-view>
		<view class="bg-orange" style="position: absolute; bottom: 0rpx; height: 140rpx; width: 100%;">
			<view style="margin: 30rpx 80rpx;">
				<u-row>
					<u-col span="3">
						<u-avatar :src="userInfo.avatarUrl" size="90rpx"></u-avatar>
					</u-col>
					<u-col span="9">
						<view style="font-size: 26rpx;">
							<p>{{userInfo.nickName}}</p>
							<p>累计学习 {{hours}} 小时</p>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMineRecord,
		getRecordRank
	} from '@/api/sr/record'
	import {
		toast
	} from '@/utils/common'
	export default {
		data() {
			return {
				nowTime: '',
				hours: 0,
				viewHeight: 1400,
				rankList: [],
				userInfo: {}
			}
		},
		onLoad() {
			this.getTime();
			if (this.$store.state.user.user) {
				this.userInfo = JSON.parse(this.$store.state.user.user)
				console.log(this.userInfo)
				this.getHours()
				this.getRank()
			}
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success(res) {
					console.log(res)
					that.viewHeight = res.windowHeight * (750 / res.windowWidth) - 140
				}
			})
		},
		methods: {
			getTime: function() {
				this.nowTime = this.$moment().minute(0).format('YYYY-MM-DD HH:mm');
				console.log(this.nowTime);
			},
			async getHours() {
				getMineRecord().then(res => {
					console.log(res)
					this.hours = res.data.hours;
					this.$store.commit('setHours', res.data.hours)
				}).catch((err) => {
					toast(err)
				});
			},
			async getRank() {
				getRecordRank().then(res => {
					console.log(res)
					this.rankList = res.data
				}).catch((err) => {
					toast(err)
				});
			}
		},
		filters: {

		}
	}
</script>

<style lang="scss">

</style>